<template>
  <ul class="footer">
    <li @click="toIndex">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li @click="toConsultation">
      <i class="fa fa-compass"></i>
      <p>客服</p>
    </li>
    <li @click="toOrderList">
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li @click="toInformation">
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>
  </ul>
</template>
<script>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';


export default {
  name: 'Footer',
  // 此处更改by whq
  // 原因：每次点击出现闪退
  setup() {
    const router = useRouter();
    const user = ref(null);

    onMounted(() => {
      getSessionStorage();
    });

    const getSessionStorage = () => {
      const storedUser = sessionStorage.getItem('user');
      user.value = storedUser ? JSON.parse(storedUser) : null;
    };

    const toOrderList = () => {
      if (user.value === null) {
        router.push({
          path: '/login'
        });

      } else {
        router.push({
          path: '/orderList'
        });
      }
    };

    const toInformation = () => {
      if (user.value === null) {
        router.push({
          path: '/login'
        });

      } else {
        router.push({
          path: '/information'
        });

      }
    };

    const toIndex = () => {
      router.push({ path: '/index' });
    };
    //hx
    const toConsultation = () => {
      router.push({ path: '/consultation' });
    };

    return {
      toOrderList,
      toIndex,
      toInformation,
      toConsultation,
    };
  }
}
</script>
<style>
.wrapper .footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .footer li {
  /*li本身的尺寸完全由内容撑起*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}

.wrapper .footer li p {
  font-size: 2.8vw;
}

.wrapper .footer li i {
  font-size: 5vw;
}
</style>



